<template>
    <div class="data-screen">
        <full-screen-container>
            <Header />
            <border-box-13 class="main-container">
                <div class="left-container">
                    <Left />
                </div>
                <div class="center-container">
                    <CenterCon />
                </div>
                <div class="right-container">
                    <Right />
                </div>
            </border-box-13>
        </full-screen-container>
    </div>
</template>

<script setup lang="ts">
    import { useI18n } from 'vue-i18n';
    import { FullScreenContainer, BorderBox13 } from '@kjgl77/datav-vue3';
    import Header from './components/header.vue';
    import Left from './components/left/index.vue';
    import Right from './components/right/index.vue';
    import CenterCon from './components/center/index.vue';
</script>

<style lang="less" scoped>
    .data-screen {
        width: 100%;
        height: 100%;
        color: #fff;
        background-color: #030409;

        #dv-full-screen-container {
            display: flex;
            flex-direction: column;
            background-image: url('@/assets/images/bigscreen/bg.png');
            background-size: 100% 100%;
            box-shadow: 0 0 3px blue;
        }

        .main-container {
            position: reactive;
            height: calc(100vh - 10px);

            ::v-deep .border-box-content {
                display: flex;
                box-sizing: border-box;
                padding: 15px;
            }
        }

        .left-container,
        .right-container {
            width: 26%;
            height: 100%;
        }

        .center-container {
            flex: 1;
            width: 48%;
            height: 100%;
        }
    }
</style>
